import type { FC } from 'react';
import { View, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import MenuItem from './menuItem';
import { useItems } from './hooks';
import { sharePlatforms } from './configs';
import styles from './styles';

const Menus: FC = () => {
  const items = useItems();
  const { bottom } = useSafeAreaInsets();

  return (
    <View style={styles.content}>
      <View style={{ paddingBottom: bottom }}>
        <View style={styles.header}>
          <Text style={styles.title}>
            Share to
          </Text>
        </View>
        <View style={styles.items}>
          {sharePlatforms.map((item) => {
            return (
              <MenuItem
                {...item}
                key={item.key}
              />
            );
          })}
        </View>
        <View style={styles.space} />
        <View style={styles.items}>
          {items.map(item => {
            return (
              <MenuItem
                {...item}
                key={item.key}
              />
            );
          })}
        </View>
      </View>
    </View>
  );
}

export default Menus;